import React, { useState } from 'react'
import './navbar1.scss'
import ChinaJson from '../../assets/china.json'
import { useSelector } from 'react-redux'
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, Select } from 'antd';
import type { CascaderProps } from "antd";

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

function navbar1(props: any) {
  const GoodList = useSelector(state => {
    return state.list.data
  })
  // console.log('GoodList',GoodList);
  
  const onFinish = (value: any) => {
    // console.log(value,'111111111');
    
    props.goSearch(value, '传递')
  }
  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    // console.log('Failed:', errorInfo);
  };

  // 检测区域
  const options: any[] = [
    {
      value: '一层饮水机',
      label: '一层饮水机',
    },
    {
      value: '二层饮水机',
      label: '二层饮水机',
    },
    {
      value: '三层饮水机',
      label: '三层饮水机',
    },
    {
      value: '一层灭火器',
      label: '一层灭火器',
    },
    {
      value: '二层灭火器',
      label: '二层灭火器',
    },
    {
      value: '三层灭火器',
      label: '三层灭火器',
    },
    {
      value: '一层监控设备',
      label: '一层监控设备',
    },
    {
      value: '二层监控设备',
      label: '二层监控设备',
    },
    {
      value: '三层监控设备',
      label: '三层监控设备',
    },
  ]
  // 检测区域
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  // 检测状态
  const optionsStatus: any[] | undefined = [
    {
      value: '正常',
      label: '正常',
    },
    {
      value: '异常',
      label: '异常',
    },
  ]

  // 用水检测
  const optionsCity = ChinaJson.map((item: any) => {
    return {
      value: item.code,
      label: item.label,
      children: item.children.map((child: any) => ({
        value: child.code,
        label: child.label,
      })),
    };
  })
  //用水检测
  const onChange: CascaderProps<Option>["onChange"] = (value) => {
    console.log(value);
  };


  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>("horizontal");
  type LayoutType = Parameters<typeof Form>[0]["layout"];

  const formItemLayout =
    formLayout === "horizontal"
      ? { labelCol: { span: 12 }, wrapperCol: { span: 12 } }
      : null; // 水平表单布局
     
      const className = ['navbar1','navbar2']
  return (
    <div className='className'>
      <Form form={form} {...formItemLayout} layout='inline' initialValues={{ layout: formLayout }} onFinish={onFinish}>
        <Form.Item
          name="stuName"
          label="检测人员姓名">
          <Input placeholder='请输入检测人员姓名' />
        </Form.Item>

        <Form.Item
          name="bourn"
          label="检测区域">
          <Select
            placeholder="请选择检测区域"
            style={{ width: 120 }}
            onChange={handleChange}
            options={options}
          ></Select>
        </Form.Item>

        <Form.Item
          name="switch"
          label="检测状态">
          <Select
            placeholder="请选择环境检测状态"
            style={{ width: 120 }}
            onChange={handleChange}
            options={optionsStatus}
          ></Select>
        </Form.Item>

        <Form.Item
          name="expertiseName"
          label="用水检测">
          <Select
            placeholder="请选择用水检测"
            style={{ width: 120 }}
            options={optionsCity}
            onChange={onChange}
          ></Select>
        </Form.Item>

        <Form.Item style={{ marginLeft: 100 }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default navbar1
